<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 用一个盒子准备界面 -->
    <div id="app">
        <!-- 数据一旦改变，界面会跟这边 -->
        <button @click="list.push('火影忍者')">
            给数组加元素
        </button>
        <button @click="list.pop()">
            数组删除最后一个
        </button>
        <ul>
            <!-- 遍历list这个数组，数组有多少个元素，就创建多少个li -->
            <!-- item就是数组中的每一项 -->
            <!-- <li v-for="item in list"> {{ item }} </li> -->

            <!-- 完整写法：既可以拿每一项，又可以拿到下标 -->
            <!-- 第一个是数组中每一项，第二个一定是下标，跟名字没有关系，跟名字可以随便写 -->
            <li v-for="(item, index) in list"> {{ item }} --- {{ index }}</li>
        </ul>

        <!-- 也可以遍历对象 -->
        <ul>
            <!-- 简写 -->
            <li v-for="value in obj">{{ value }}</li>
            <!-- 完整写法：既可以拿到属性值，也可以拿到属性名（key） -->
            <!-- 第一个一定是属性值，第二个一定是属性名 -->
            <li v-for="(value, key) in obj">{{ value }} -- {{ key }}</li>
        </ul>


        <!-- 指定次数的循环 -->
        <ul>
            <!-- 从1到5的数字 -- 这个实际开发几乎不用，主要是用来做文档演示 -->
            <li v-for="num in 5">{{ num }}</li>
        </ul>
    </div>

    <!-- 导入vue.js -->
    <script src="./vue.js"></script>

    <script>
        // 实例化一个Vue对象
        new Vue({
            el: '#app',
            data: {
                list: ['千与千寻', '龙猫', '你的名字', '天气之子'],
                obj: {
                    name: 'jack',
                    age: 16,
                    height: 175
                }
            }
        })
    </script>
</body>

</html>